import React, { useState } from 'react';
import './App.css';
import Loading from '../Loading/Loading';
import { CSSTransition } from 'react-transition-group';

const AsynchronousComp = React.lazy(() => import('../Game/Game'));

export type openAni = {
    gameShow: boolean,
    loadingOver?: boolean,
    gameOver?: boolean
}

const App: React.FC = () => {
  const [openAni, setOpenAni] = useState<openAni>({ gameShow: false, loadingOver: false, gameOver: false });
  console.log(11111111);
  return (
    <div className='App'>
      <CSSTransition in={!openAni.gameShow} unmountOnExit timeout={1000} classNames='my-node'>
        <Loading openAni={openAni} setOpenAni={setOpenAni}/>
      </CSSTransition>
      <CSSTransition in={openAni.gameShow} timeout={5000} classNames='my-node'>
        <section style={{ display: openAni.gameShow ? 'block' : 'none' }}>
          <React.Suspense
            fallback={<></>}
          >
            <AsynchronousComp openAni={openAni} setOpenAni={setOpenAni}/>
          </React.Suspense>
        </section>
      </CSSTransition>
    </div>
  );
};

export default App;
